<template>
  <div class="about">
    <h1>This is an hello page</h1>
    <a-space>
      <a-button type="primary">Primary</a-button>
      <a-button>Secondary</a-button>
      <a-button type="dashed">Dashed</a-button>
      <a-button type="outline">Outline</a-button>
      <a-button type="text">Text</a-button>
    </a-space>

    <a-table :columns="columns" :data="data" />

    <a-input :style="{width:'320px'}" placeholder="Please enter something" v-model="userInput" allow-clear />
    <!-- 这个模板在渲染的时候，编译器 发现你是个ref对象，自动帮你补充了 userInput.value -->
    <div>{{ userInput }}</div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const userInput = ref('')

// 编译器被没有操作你的js代码,  所以你需要自己补充
userInput.value = 'asdfsdf'

const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Salary',
        dataIndex: 'salary',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
      {
        title: 'Email',
        dataIndex: 'email',
      },
    ];

    const data = reactive([{
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com'
    }, {
      key: '2',
      name: 'Alisa Ross',
      salary: 25000,
      address: '35 Park Road, London',
      email: 'alisa.ross@example.com'
    }, {
      key: '3',
      name: 'Kevin Sandra',
      salary: 22000,
      address: '31 Park Road, London',
      email: 'kevin.sandra@example.com'
    }, {
      key: '4',
      name: 'Ed Hellen',
      salary: 17000,
      address: '42 Park Road, London',
      email: 'ed.hellen@example.com'
    }, {
      key: '5',
      name: 'William Smith',
      salary: 27000,
      address: '62 Park Road, London',
      email: 'william.smith@example.com'
    }]);


    // 打印当前组件实例, 这个就是ViewMode对象
    // console.log(getCurrentInstance()) 

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
